
<template>
  <div class="app-container">
    <Find  @Launchform="Launchform3"  :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '10px 10px 0' }" class="mt10">
        <div slot="header" class="f16">
          <span style="font-weight: 600" class="mr55">扫描下单条码</span>
        </div>
        <div class="flex mt10" style="align-items: center">
          <div class="f14 mr55">PS:扫描指令单标签时，请确认光标置于此栏位</div>
          <div class="f14 mr55">
            <span class="mr10">扫描条码</span>
            <el-input @keydown="(event:any) => handleKeyDown(event)" v-model="scanCode" style="width: 414px; height: 25px; font-size: 20px" />
          </div>
          <div class="flex AIC">
            <span class="mr10">扫描信息</span>
            <div :class="flagBC === '0' ? '' : flagBC === '1' ? 'susses' : 'error'" style="width: 250px; height: 25px; border: 1px solid black">
              {{ scanMessage }}
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">电雕采集扫描记录</h1>
        <Table
          :isLoading="isLoading"
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :outTableHeight="160"
          @currentRow="currentRow3"
          @inputChange="inputChange"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '0px 5px 5px' }">
        <PageModule :PageData="{ total: total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  // 定义组件的名称
  name: 'ElectricCarving'
})

</script>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import { AcquisitionModel, selectList } from '@/plugins/mixin'
import LoginWork from '@/utils/LoginWork'
import type { formListType } from '@/components/Find/index.vue'
import JMessage from '@/utils/JMessage'
import {getList,deleteList } from '@/api/exploitation/BoardBuildingCompleted'
// 修改
const inputChange = async(row:any) => {
  const result = await service.post<any,any>(`/mes/pc/order/prodStatus/updateProdStatusById`,row)
    if(result.code === 200){
    getTableList()
    ElMessage.success(result.msg)
  }else{
    getTableList()
    ElMessage.error(result.msg)
  }
}

// 删除
const deleteListParms = ref()
const currentRow3 = (row:any) => {
  deleteListParms.value = row
}
const handleDeleteList = async () => {
  const result = await deleteList(deleteListParms.value)
  if(result.code === 200){
    ElMessage.success(result.msg)
    getTableList()
  }else{
    ElMessage.error(result.msg)
  }
}

// 查询
const getListParms = ref({
  brand: "",
  choose: "4",
  completeEndTime: "",
  completeStartTime: "",
  dataScope: "",
  deliveryEndTime: "",
  deliveryStartTime: "",
  isAsc: "",
  orderByColumn: "",
  orderId: "",
  pageNum: 0,
  pageSize: 0,
  prodStep: "",
  prodUserName: "",
  reasonable: true,
  style: "",
  workerUser: ""
})

const Launchform3 = (row:any) => {
  getListParms.value.orderId = row[0].inputValue
  getListParms.value.brand = row[1].selectValue
  getListParms.value.style = row[2].inputValue
  getListParms.value.deliveryEndTime = row[3].dateValue[1]
  getListParms.value.deliveryStartTime = row[3].dateValue[0]
  getListParms.value.prodUserName = row[4].selectValue
  getListParms.value.completeStartTime = row[5].dateValue[0]
  getListParms.value.completeEndTime = row[5].dateValue[1]
}

const getTableList = async () => {
  isLoading.value = true
  const result = await getList(getListParms.value) 
  if(result.rows.length === 0){
    tableData.value = []
  }else{

  
  tableData.value = result.rows.map((item:any) => {
        item.change = true
        item.disableConfirm = true


        return item
      })
  tableData.value = result.rows.map((item:any) => { 
        item.photoPath = Object.values(result.files).find((item1:any) => {  
          return item1.fileId === item.photoId; // 查找合匹配的 photoId  
        });  
        

        return item
      })
  imgList.value = result.rows.map((item:any) => {
          const {buckName,fileName} = item.photoPath
          return {buckName,fileName}
      })
  await Promise.all(
    tableData.value.map(async (item:any) => {
        const result = await service.get<any, any>(`/file/oss/view/${item.photoPath.buckName}/${item.photoPath.fileName}`);
        item.photoPath = 'data:image/png;base64,'+result.data
        return 'data:image/png;base64,'+result.data
      })
    );
    imgList.value = await Promise.all(  
      imgList.value.map(async (item:any) => {  
        const result = await service.get<any, any>(`/file/oss/view/${item.buckName}/${item.fileName}`);  
        return 'data:image/png;base64,'+result.data
      })  
    );  
  total.value = result.total
    }
  isLoading.value = false
}
const user = ref()
onMounted(() => {
  
  user.value = JSON.parse(sessionStorage.getItem('userInfo') as any) 
  console.log(user.value)
  getListParms.value.prodUserName =  user.value?.userName || '';
  getTableList()
})

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'select',
    selectP: '品牌',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入货号',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '客户交期',
    dateValue: ''
  },
  {
    type: 'select',
    selectP: '采集员',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '完成日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '删除扫描记录'
  },
  {
    type: 'button',
    checkboxLabel: '查询所有采集信息'
  }
])
const tableData = ref([])
const isLoading = ref(true)
const scanCode = ref('')
const scanMes = ref('')
const imgList = ref<any>([])
const flagBC = ref('0')
const scanMessage = ref('')
const handleCloseMateriaLKlc14 = () => {
  ElMessageBox.confirm('确认要删除吗?')
    .then(async () => {
      handleDeleteList()
    })
    .catch(() => {})
}
const findClicked = async (content: string) => {
  if (content === '删除扫描记录') {
    if (deleteListParms.value === undefined) {
      ElMessage.warning('请选择要删除的扫描记录')
      return 
    } 
    handleCloseMateriaLKlc14()
  }
  if (content === '查询所有采集信息') {
    getListParms.value.prodUserName = ''
    getTableList()
  }
  if(content === '查询'){
     getListParms.value.prodUserName = user.value?.userName || '';
     getTableList() 
  }
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}

const handleKeyDown = async (e: any) => {
  if (e.key === 'Enter' || e.keyCode === 13) {
    const res = (await service.post(`/mes/pc/order/prodStatus/ecCollect`, {
      orderId: scanCode.value.toUpperCase(),
      dutyDept: "",
      dutyReason: "",
      prodQty: 0,
      prodType: "正单",
      stitchBarcode: "",
      workId: "",
      workName: ""
    })) as any
    if (res.code === 200) {
      JMessage.success('扫描成功')
      getTableList()
      const tempCode = JSON.parse(JSON.stringify(scanCode.value))
      scanCode.value = ''
      flagBC.value = '1'
      scanMessage.value = tempCode
    } else {
      JMessage.error(res.msg)
      flagBC.value = '2'
      scanMessage.value = res.msg
    }
  }
}

const tableHeader = ref([
  {
    label: '指令号',
    prop: 'orderId',
    change:true
  },
  {
    label: '品牌',
    prop: 'brand',
    change:true
  },
  {
    label: '货号',
    prop: 'style',
    change:true
  },
  {
    label: '颜色',
    prop: 'color',
    change:true
  },
  {
    label: '号码',
    prop: 'sizeNo',
    width: 50,
    change:true
  },
  {
    label: '订单数量',
    prop: 'orderQty',
    change:true
  },
  {
    label: '生产数量',
    prop: 'prodQty'
  },
  {
    label: '客户交期',
    prop: 'deliveryDate',
    change:true
  },
  {
    label: '采集员',
    prop: 'prodUserName',
    change:true
  },
  {
    label: '扫描时间',
    prop: 'prodDate',
    change:true
  },
  {
    type: 'img',
    label: '图片',
    prop: 'photoPath',
    srcList: imgList
  }
])

const total = ref(0)
// 定义每页显示数量改变事件
const handleSizeChange = (val: number) => {

}
// 定义当前页改变事件
const handleCurrentChange = (val: number) => {
}
</script>
<style lang="less" scoped>
.susses {
  background-color: rgb(71, 232, 71);
  text-align: center;
  line-height: 25px;
  font-size: 20px;
}
.error {
  background-color: #ff0000;
  font-size: 20px;
  text-align: center;
}
</style>
